<template>
	<view class="card">
		<view class="top">
			<view class="company">
				{{userInfo.company}}
			</view>
			<view class="btn" @click.self="handleMore">
				<img src="https://file.casugn.com/storecompcard/temp/forward_1654829943398.png" alt="" srcset="">
			</view>
		</view>
		<view class="main" @click="goToFriendCard">
			<view class="left">
				<img :src="userInfo.head" alt="" srcset="">
			</view>
			<view class="middle">
				<view class="name">
					{{userInfo.name}}
				</view>
				<view class="title">
					{{userInfo.position}}
				</view>
				<view class="phone">
					{{userInfo.mobile}}
				</view>
			</view>
			<view class="right">
				<!-- <view class="cart">
					<img src="https://file.casugn.com/storecompcard/temp/cart_1654770877818.png" alt="" srcset="">
				</view> -->
				<!-- 	<view class="logo">
					<img src="https://file.casugn.com/storecompcard/temp/logo_1654770894091.png" alt="">
				</view> -->
			</view>
		</view>
		<view class="btnsWp">
			<view class="items">
				<view class="shareBox items">
					<view class="imgWp">
						<img src="https://file.casugn.com/storecompcard/temp/分享@2x_1656550089446.png" alt="">
					</view>
					<view class="text">
						分享
					</view>
					<button open-type="share" class="shareBtn"></button>
				</view>
			</view>
			<view class="items" @click="handleCall">
				<view class="imgWp">
					<img src="https://file.casugn.com/storecompcard/temp/打电话@2x_1656550101577.png" alt="">
				</view>
				<view class="text">
					打电话
				</view>
			</view>
			<!-- 	<view class="items" @click="handleParty">
				<view class="imgWp">
					<img src="https://file.casugn.com/storecompcard/temp/邀请组局@2x_1656550109943.png" alt="">
				</view>
				<view class="text">
					邀请组局
				</view>
			</view> -->
			<view class="items" @click="handleStar">
				<view class="imgWp">
					<img v-if="isFavorite==1" src="https://file.casugn.com/storecompcard/temp/已收藏_1656550203775.png"
						alt="">
					<img v-if="isFavorite==0"
						src="https://file.casugn.com/storecompcard/temp/未收藏@2x_1656550190489.png" alt="">
				</view>
				<view class="text" v-if="isFavorite==1">
					已收藏
				</view>
				<view class="text" v-if="isFavorite==0">
					收藏
				</view>
			</view>


		</view>
	</view>
	</view>

</template>

<script>
	export default {
		props: {
			userInfo: {
				type: Object,
				required: true,
				default: () => {}
			},
			isFavorite: {
				type: Number,
				default: 0
			}
		},
		methods: {
			//
			getFriendInfo() {

			},
			goToFriendCard() {
				this.$emit('goToFriendCard', this.userInfo)
			},
			//打电话
			handleCall() {
				let phoneNumber = String(this.userInfo.mobile)
				try {
					uni.makePhoneCall({
						phoneNumber
					});
				} catch (e) {
					uni.showToast({
						title: "电话号码有误"
					})
				}
			},
			//组局
			handleParty() {
				let userInfo = Object.assign(this.userInfo, {
					createType: 0
				})
				this.$store.commit('newParty', userInfo)
				uni.showToast({
					title: '已邀请',
					icon: 'none'
				});
				uni.navigateBack({
					delta: 2
				})
			},

			//收藏	
			handleStar() {
				let payload = null

				if (this.isFavorite == 1) {
					payload = 0
				}
				if (this.isFavorite == 0) {
					payload = 1
				}

				this.$emit('changIsFavorite', payload)
				// this.$store.dispatch('changIsFavorite',{userInfo:this.userInfo,isFavorite})

			},
			//更多操作
			handleMore() {
				this.$emit('handleMore')
			}

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮且是本人分享
				console.log('来自页面内分享按钮', res.target.dataset);
				if (!this.userInfo.id) {
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				} else {
					return {
						title: ``,
						path: '/pagesCard/friendMainPage/friendMainPage?cardId=' + this.userInfo.id
					}
				}
			} else {
				if (!this.userInfo.id) {
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				} else {
					return {
						title: ``,
						path: '/pagesCard/friendMainPage/friendMainPage?cardId=' + this.userInfo.id
					}
				}
			}
		},
	}
</script>

<style style lang="scss">
	.card {
		box-shadow: 0px 0px 9px 1px rgba(92, 87, 254, 0.2);
		border-radius: 30rpx;
		margin-top: 30upx;
		// padding-top: 30upx;
		background-color: #fff;

		.top {
			display: flex;
			padding: 50upx 30upx;

			.company {
				width: 600upx;
				font-size: 28upx;
				font-weight: 400;
			}

			.btn {
				width: 50rpx;
				height: 20rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.main {
			display: flex;
			align-items: center;
			padding: 0 30upx;

			.left {
				flex: 1;
				width: 140rpx;
				height: 140rpx;
				padding-right: 40rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.middle {
				flex: 2;

				.name {
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;
					line-height: 36rpx;
					padding-bottom: 24rpx;
				}

				.title {
					background: #FFFFFF;
					opacity: 0.66;
					border-radius: 30rpx;
					font-size: 24rpx;
					padding-bottom: 24rpx;
				}

				.phone {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 36rpx;
				}
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				;

				.cart {
					padding-right: 30rpx;
					width: 60rpx;
					height: 60rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.logo {
					width: 80rpx;
					height: 80rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.btnsWp {
			margin-top: 50upx;
			height: 70upx;
			padding: 0 30upx;
			background-color: #EEF3FB;
			display: flex;
			align-items: center;

			.items {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;

				.imgWp {
					margin-right: 10upx;

					img {
						width: 30upx;
						height: 30upx;
					}
				}

				.text {
					font-size: 24upx;
					font-weight: 400;
					color: #666666;
				}
			}
		}

	}
</style>
